<template>
  <div class="home-recommend">
    <h2 class="recommend-title">热卖推荐</h2>
    <div class="recommend-content">
      <div class="recommend-item"
        v-for="(item,index) of productList"
        :key="index"
        @click="toProdcut(item.baseinfo.itemId)">
        <div class="img-wrapper">
          <img :src="item.baseinfo.picUrl" alt="" class="product-img">
        </div>
        <div class="product-name">{{item.name.title}}</div>
        <div class="orig-price">￥{{item.price.origPrice}}</div>
        <div class="act-price">￥{{item.price.actPrice}}</div>
        <div class="sold-count">{{item.remind.soldCount}}件已售</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRecommendInfo } from '@/api/home.js'
export default {
  name: 'homeRecommend',
  data () {
    return {
      productList: [],
      curPage: 1,
      totalPage: 1
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () { // 获取推荐商品的数据
      return getRecommendInfo(this.curPage).then(data => {
        return new Promise(
          resolve => {
            if (data) {
              this.productList = this.productList.concat(data.itemList) //  将新获取的数据与原数据进行拼接
              this.totalPage = data.totalPage // 获取总页数
              this.curPage++ // 当前页加一
              this.$emit('loaded', this.productList) // 向父组件传递商品页数据一遍更新滚动条
              resolve()
            }
          })
      })
    },
    toProdcut (id) { // 跳转到商品详情页
      this.$router.push({ name: 'home-product', params: { id: id } })
    },
    update () { // 更新推荐商品内容
      if (this.curPage > this.totalPage) {
        return Promise.reject(new Error('没有更多的数据了'))
      } else {
        return this.getInfo()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.home-recommend
  .recommend-title
    font-size 18px
    padding 10px 0
    text-align center
    position relative
    &:before,&:after
      content ' '
      display inline-block
      width 40%
      border-bottom 1px solid grey
      position absolute
      top 19px
    &:before
      margin-right 10px
      left 0
    &:after
      margin-left 10px
      right 0
  .recommend-content
    display flex
    justify-content space-between
    flex-wrap wrap
    .recommend-item
      background #fff
      width 49%
      padding-bottom 15px
      margin-bottom 10px
      position relative
      .img-wrapper
        width 100%
        height 0
        padding-bottom 100%
        margin-bottom 15px
        .product-img
          width 100%
      .product-name
        font-size 18px
        padding 0 0 20px 10px
      .orig-price
        font-size 18px
        padding 0 0 10px 10px
        text-decoration line-through
      .act-price
        font-size 18px
        color red
        padding-left 10px
      .sold-count
        position absolute
        right 10px
        bottom 20px
</style>
